<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml" xmlns: xmlns:>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福山</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/element/elemet-ui.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper/swiper-4.1.6.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/rem.css" />
    <link rel="stylesheet" href="../js/map/DrawingManager_min.css">
    <link rel="stylesheet" href="../assets/fonts/iconfont/iconfont.css">
    <link href="../assets/css/GA.css" type="text/css" rel="stylesheet">
    <style>
        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .el-tree-node__content:hover {
            background-color: rgba(0, 0, 0, .8);
        }

        .title .el-input__inner {
            background-color: #00295C !important;
            border: 1px solid #056DAD !important;
            color: rgb(0, 174, 244) !important;
        }

        .pubHead {
            width: 100%;
            height: 80px;
            padding-left: 40px;
            box-sizing: border-box;
            background-color: #011a42;
        }

        .log {
            float: left;
            width: 40px;
            height: 42px;
            margin-top: 19px;
            background: url('../assets/image/logo.png') no-repeat;
        }

        .logtitle {
            float: left;
            margin-left: 10px;
            height: 80px;
            line-height: 80px;
            width: auto;
            font-size: 22px;
            color: #79afff;
        }

        .tabUl {
            float: left;
            margin-left: 285px;
            overflow: hidden;
        }

        .tabUl li {
            float: left;
            padding: 0px 20px;
            height: 80px;
            line-height: 80px;
            color: #79afff;
            font-size: 18px;
            cursor: pointer;
        }

        .tabUl li.li_active {
            height: 77px;
            font-size: 18px;
            line-height: 80px;
            border-bottom: 3px solid #0070ff;
        }

        .warnActive {
            width: 2rem !important;
            height: 2rem !important;
            margin-top: 0rem !important;
        }

        .el-select,
        .jiadun-container {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .main {
            flex: 1;
            background: #002759;
            width: 100%;
            padding: 0px 28px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .top {
            width: 100%;
            height: 70px;
        }

        .top>span {
            height: 70px;
            line-height: 70px;
            display: inline-block;
            /* float: left; */
            margin-left: 10px;
            font-size: 18px;
            color: #79afff;
        }

        .top .circle {
            width: 8px;
            height: 8px;
            background-color: #0070ff;
            margin-top: 30px;
            margin-left: 15px;
        }

        .top .endspan {
            color: #0068ed;
        }

        .main_body {
            width: 100%;
            flex: 1;
            position: relative;
            margin-bottom: 1rem;
            border-radius: .3rem;
        }

        .left-box {
            position: absolute;
            z-index: 999;
            width: 14rem;
            height: 85%;
            background: rgba(14, 82, 131, 1);
            left: 10px;
            top: 10px;
            /* opacity:0.8;*/
        }

        .left-box .content {
            position: relative;
            z-index: 999;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column
            /* opacity:0.8;*/
        }

        .tree {
            height: 25rem;
            overflow-y: auto
        }

        .outborder {
            width: 18px;
            height: 18px;
        }

        .left-box .title {
            width: 100%;
            height: 2.5rem;
            background: rgba(0, 53, 120, 1);
            opacity: 0.98;
            display: flex;
            align-items: center
        }

        .left-box .title>div {
            height: 2.5rem;
            line-height: 2.5rem;
            margin: 0 1rem;
            cursor: pointer;
        }

        .right-box {
            position: absolute;
            z-index: 999;
            width: 25rem;
            height: 95%;
            top: 1rem;
            right: .5rem;
            background: rgba(14, 82, 131, 1);
            /* opacity:0.8; */
        }

        .right-box .content {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            padding-left: 1.2rem;
            padding-top: 2.5rem;
            box-sizing: border-box;
            position: relative;
        }

        .right-box .content .title {
            position: absolute;
            width: 100%;
            height: 2.5rem;
            left: 0;
            top: 0;
            Z-index: 9999
        }

        .maprightbox {
            width: 95%;
            background: #111e3f;
            z-index: 99999;
            border: 1px solid #056DAD;
            overflow: hidden;
            background: #00295c;
            padding: 1rem 0
        }
        .el-table, .el-table__expanded-cell{
            background: transparent
        }
        .maprightbox .maprtop {
            width: 100%;
            height: 2.5rem;
            background-color: #00295c;
            color: #47cdfe;
            font-size: 20px;
            line-height: 2.5rem;
            text-indent: 1rem;
        }

        .maprightbox .maprbody {
            width: 100%;
            height: auto;
            padding: 0px 0.75rem;
            box-sizing: border-box;
        }

        .maprightbox .maprbody .bodytop {
            width: 100%;
            height: 2.5rem;
            border-bottom: 1px solid #0c316e;
        }

        .maprightbox .maprbody .bodytop span {
            font-size: 20px;
            color: #da1515;
            text-indent: 2.5rem;
            line-height: 2.5rem;
        }

        .maprightbox .maprbody .bodytop .bodytopi {
            float: right;
            margin-right: 2rem;
            margin-top: 0.5rem;
            display: inline-block;
            width: 1.4rem;
            height: 1.4rem;
            background: url("../assets/image/locateinformation.png") no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }

        .maprightbox .maprbody .bodymain {
            width: 100%;
            position: relative;
            height: auto;
        }

        .maprightbox .maprbody .bodymain .bodyimg {
            width: 5.5rem;
            height: 6.3rem;
            position: absolute;
            right: 0px;
            top: 0.75rem;
            background-color: #87ceeb;
        }

        .maprightbox .maprbody .bodymain .bodymaint {
            width: auto;
            height: 2rem;
            line-height: 2rem;
            color: #00aef4;
            font-size: 16px;
        }

        .maprightbox .maprbody .bodymain .bodymainul li {
            width: auto;
            height: 1.8rem;
            line-height: 1.8rem;
        }

        .maprightbox .maprbody .bodymain .bodymainul li .lileft {
            color: rgb(0, 174, 244);
        }

        .maprightbox .maprbody .bodymain .bodymainul li .liright {
            color: #00aef4;
        }

        .maprightbox .maprbody .bodymain .selectimemap {
            width: 100%;
            height: auto;
            overflow: hidden
        }

        .maprightbox .maprbody .bodymain .selectimemap .lileft {
            color: rgb(0, 174, 244);
            line-height: 2rem;
            overflow: hidden
        }

        .maprightbox .maprbody .bodymain .selectimemap .btnline {
            float: left;
            width: 1.5rem;
            height: 1.5rem;
            background: url("../assets/image/trajectory.png") no-repeat;
            background-size: 100% 100%;
            margin-left: 0px;
            cursor: pointer;
            overflow: hidden
        }

        .el-pagination .btn-prev,
        .el-pagination .btn-next,
        .el-pagination .el-pager .number,
        .el-pagination .el-pager .more {
            background: transparent !important;
            color: #046bb8
        }

        .el-pagination .el-pager .number.active {
            color: #fff
        }

        .el-table__body-wrapper {
            background: #00295c;
            border: #00295c;
            color: #015093
        }

        .el-table::before {
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0px;
        }

        .el-table th {
            background: #00295c !important;
            border-color: #00295c;
            color: #2b8dbe
        }

        .el-table tr,
        .el-table tr td {
            background: #00295c !important;
            border-color: #00295c;
            color: rgb(0, 174, 244)
        }

        .el-table .el-table__row--striped,
        .el-table .el-table__row--striped td {
            background: #00316d !important;
        }

        .el-table td,
        .el-table th.is-leaf {
            border-color: #024b84
        }

        .el-table--enable-row-hover .el-table__body tr:hover>td {
            background: rgba(0, 49, 109, .4) !important
        }

        .left-box .title i {
            height: 50px;
            line-height: 50px;
            width: 70px;
            text-align: center;
            cursor: pointer;
            font-size: 28px;
        }

        .icon-signal2xinhao {
            color: #47CDFE;
        }

        .icon-wangluoxinhao {
            color: #00CC66;
        }

        .icon-wifixinhao {
            color: #FFA200;
        }

        .el-date-editor .el-range-separator {
            color: #00aef4;
        }

        /*覆盖el样式*/
        .el-date-editor{
            border: 1px solid #056DAD;
        }
        .el-date-editor:hover{
            border: 1px solid #056DAD;
        }
        .selectimemap .el-input__inner{
            border: 1px solid #056DAD;
            background-color: #00295C;
            color: rgb(0, 174, 244);
        }
        .selectimemap .el-range-input::placeholder{
            color: rgb(0, 174, 244);
            cursor: pointer;

        }
        .selectimemap .el-range-input{
            background-color: #00295C;
            cursor: pointer;
            color: rgb(0, 174, 244);
        }
        .el-loading-mask {
            position: absolute;
            z-index: 2000;
            background-color: rgba(255,255,255,.9);
            background: rgb(0, 41, 92) !important;
            margin: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            -webkit-transition: opacity .3s;
            transition: opacity .3s;
        }
        .el-table__row {
            cursor:pointer
        }
        .ellipsis{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .slide-fade-enter-active {
            transition: all .8s ease;
          }
        .slide-fade-leave-active {
        transition: all .3s ease;
        }
        .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(30px);
        opacity: 0;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div id="pubHead" class="pubHead">
            <div class="log"></div>
            <div class="logtitle">福山公安数据治理系统</div>
            <ul class="tabUl">
                <li :class="{'li_active':activeIndex === index}" v-for="(item, index) in menuList" :key="index" @click="routerGo(item)">{{item.name}}
                </li>
                <!-- <li :class="{'li_active':activeIndex === 1}">数据源注册</li>
            <li>数据采集任务管理</li>
            <li>数据采集监控</li>
            <li>录入工具</li>
            <li>资源目录</li> -->
            </ul>
        </div>
        <div class="main">
            <div class="top">
                <span class="circle"></span>
                <span>智能作战系统</span>
                <span>></span>
                <span>地界防控</span>
                <span>></span>
                <span class="endspan">外来人口监测</span>
                <el-button type="primary" size="mini" @click="goBack" style="position:absolute;right:5rem;margin-top:1rem">
                    返回
                </el-button>

            </div>
            <div class="main_body">
                <div class="left-box">
                    <div class="content">
                        <div class="outborder" style="z-index:9999;position:absolute;top:-1px;left:-1px;background:url(../assets/image/top-left.png)  no-repeat;"></div>
                        <div class="outborder" style="z-index:9999;position:absolute;top:-1px;right:-3px;background:url(../assets/image/top-right.png)  no-repeat;"></div>
                        <div class="outborder" style="z-index:9999;position:absolute;bottom:-3px;left:-1px;background:url(../assets/image/bottom-left.png) no-repeat;"></div>
                        <div class="outborder" style="z-index:9999;position:absolute;bottom:-1px;right:-1px;background:url(../assets/image/bottom-right.png)  no-repeat;"></div>
                        <div class="title">
                            <i class="iconfont icon-signal2xinhao" @click="isShowProbe" title="显示探针"></i>
                            <i class="iconfont icon-wangluoxinhao" @click="isShowEle" title="显示电围"></i>
                            <i class="iconfont icon-wifixinhao"></i>
                        </div>
                        <el-tree ref='el-tree' :data="provinceAndCityData" show-checkbox @check="handleCheckChange" class="tree" node-key="value"
                            style="background-color: rgba(0,0,0,0);color: #00A6FB;flex:1"></el-tree>
                        <div class="btn-box" style="overflow:hidden;display:flex;justify-content:center;padding:.5rem 0;background:rgba(0, 53, 120, 1)">
                            <el-button type="primary" size="mini" @click="provinceSub" style="margin-right:1rem">
                                省级监测
                            </el-button>
                            <el-button type="primary" size="mini" @click="citySub">
                                市级监测
                            </el-button>
                        </div>
                    </div>

                </div>
                <transition name="slide-fade">
                    <div class="right-box" v-if="showRight">
                        <div class="outborder" style="z-index:9999;position:absolute;top:-1px;left:-1px;background:url(../assets/image/top-left.png)  no-repeat;"></div>
                        <div class="outborder" style="z-index:9999;position:absolute;top:-1px;right:-3px;background:url(../assets/image/top-right.png)  no-repeat;"></div>
                        <div class="outborder" style="z-index:9999;position:absolute;bottom:-3px;left:-1px;background:url(../assets/image/bottom-left.png) no-repeat;"></div>
                        <div class="outborder" style="z-index:9999;position:absolute;bottom:-1px;right:-1px;background:url(../assets/image/bottom-right.png)  no-repeat;"></div>
                        <div class="content">
                            <div class="title">
                                <div style="width: 100%;height: 2.5rem;display: flex;flex-direction: row;flex-wrap: nowrap;background-color: #00295C;align-items: center">
                                    <div class="el-icon-caret-right" title="收起面板" style="margin:1rem;cursor:pointer;font-size:1.5rem;color:rgb(0, 174, 244)" @click="showRight=false">
                                    </div>
                                    <div style="line-height: 2.5rem;flex: 1;font-family:MicrosoftYaHei;color:rgba(0,174,244,1);margin-left: 0.7rem">
                                        重点外来人口占比
                                    </div>
                                    <el-select v-model="value" placeholder="请选择" style="width: 6rem;height: 1.9rem;border: 1px solid #056DAD;margin-right:1rem">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div id="pieChart" style="width:95%;height:10rem;margin-bottom:1rem">

                            </div>
                            <div style="background: #00295c!important;padding:0;box-sizing:border-box;width:95%">
                                <el-table :data="tableData" v-loading='loading' style="width:100%" @row-click="getDetail" stripe>
                                    <el-table-column prop="imsi" label="特征码" width="130">
                                        <template slot-scope="scope">
                                            <span class="ellipsis">{{scope.row.imsi}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="phonePrefix" label="号码解析" width="135">
                                        <template slot-scope="scope">
                                            {{scope.row.phonePrefix | phoneComplet}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="归属地">
                                        <template slot-scope="scope">
                                            <span class="ellipsis" v-if="pieType === 1">{{scope.row.province }}</span>
                                            <span class="ellipsis" v-if="pieType === 2">{{scope.row.city }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="captureNum" label="捕获次数" width="90">
                                    </el-table-column>
                                </el-table>
                                <el-pagination @current-change="handleCurrentChange" :current-page.sync="current" :page-size="pagesize" layout="prev, pager, next"
                                    :page-count="totalPage">
                                </el-pagination>
                            </div>
                            <div style="height:2rem;width:95%;line-height:2rem;background:#003578;border-radius:.2rem;text-indent:1rem;margin:.5rem 0;color:rgb(0, 174, 244)">人员详情</div>
                            <div class="maprightbox" style="margin-bottom:1rem" v-loading="infoLoading">
                                <div class="maprbody">
                                    <div class="bodymain">
                                        <i class="el-icon-location" style="position:absolute;right:0;color:#47cdfe;font-size:24px;cursor:pointer" title="最后出现位置"
                                            @click="showendpoint"></i>
                                        <ul class="bodymainul">
                                            <li>
                                                <span class="lileft" style="color:#00aef4;">
                                                    IMSI：{{peopleDetail.imsi}}
                                                </span>
                                                <span class="liright"></span>
                                            </li>
                                            <li>
                                                <span class="lileft">首次采集时间：</span>
                                                <span class="liright">{{peopleDetail.firsttime}}</span>
                                                <!-- <i class="el-icon-location" style="color:#47cdfe;font-size:20px;cursor:pointer" @click="showfirstpoint"></i> -->
                                            </li>
                                            <li>
                                                <span class="lileft">最后采集时间：</span>
                                                <span class="liright">{{peopleDetail.lasttime}}</span>
                                            </li>
                                            <li>
                                                <span class="lileft">姓名：</span>
                                                <span class="liright">{{peopleDetail.name}}</span>
                                            </li>
                                            <li>
                                                <span class="lileft">民族：</span>
                                                <span class="liright">{{peopleDetail.mz}}</span>
                                            </li>
                                            <li>
                                                <span class="lileft">身份证号：</span>
                                                <span class="liright">{{peopleDetail.idcard}}</span>
                                            </li>
                                            <li>
                                                <span class="lileft">联系电话：</span>
                                                <span class="liright">{{peopleDetail.phonenum}}</span>
                                            </li>
                                        </ul>
                                        <div class="selectimemap">
                                            <span class="lileft" style="display:inline-block;float:left">人员轨迹：</span>
                                            <div>
                                                <el-date-picker v-model="valuetime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                                                    end-placeholder="结束日期" style="width:18rem;margin:0px;margin-right:1rem;float:left">
                                                </el-date-picker>
                                            </div>
                                            <div class="btnline" @click="showpeopleline"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </transition>
                <my-map ref="mymap" :electricitypoints="electricityPoints" :probepoints="probePoints" :peopleroutes="peopleRoutes" :peopoleendpoint="peopoleEndPoint"></my-map>
            </div>
        </div>
    </div>
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/vue/vue.js"></script>
    <!--<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>-->
    <script src="../js/jquery-3.0.0.min.js.js"></script>
    <script type="text/javascript" src="../js/element/element.js"></script>
    <script type="text/javascript" src="../js/swiper/swiper-4.1.6.min.js"></script>
    <script type="text/javascript" src="../js/urls.js"></script>
    <script src="../js/areaData.js"></script>

    <script src="../js/map/baiduInterface.js"></script>
    <!-- <script src="../js/map/mapFunction.js"></script> -->
    <script src="../js/axios.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>

    <script src="../js/mapExternal.js"></script>
    <script src="../js/echarts.min.js"></script>


    <script type="text/javascript">
        $(function () {
            var vm;
            vm = new Vue({
                el: '#app',
                data: {
                    menuList: [{
                        name: '归属地查询',
                        path: './attributionSearch.html'
                    },
                    {
                        name: '外来人口监测',
                        path: './externalPeople.html'
                    },
                    {
                        name: '外来人口驻留分析',
                        path: './peopleAnalyse.html'
                    },
                    {
                        name: '人口流向分析',
                        path: './populationAnalysis.html'
                    }
                    ],
                    showLeft:true,
                    loading:false,
                    infoLoading:false,
                    activeIndex: 1,
                    fileUrl: fileUrl,
                    electricityPoints: [],
                    probePoints: [],
                    electricityFlag: false,
                    probeFlag: false,
                    endFlag: false,
                    valuetime: null,
                    current: 1,
                    pagesize: 5,
                    tableData: [],
                    totalPage: 0,
                    value: 1,
                    options: [{
                        value: 1,
                        label: '最近一日'
                    },
                    {
                        value: 2,
                        label: '最近一周'
                    },
                    {
                        value: 3,
                        label: '最近一月'
                    }
                    ],
                    selectCity: [],
                    pieType: null,
                    tableCode: null,
                    peopleDetail: {},
                    peopleRoutes: [],
                    peopoleEndPoint: {},
                    showRight:false
                },
                created: function () { },
                mounted: function () {
                    let self = this
                    self.electricityPoints = [{}]
                    self.probePoints = [{}]
                    self.peopleRoutes = [{}]
                },
                methods: {
                    handleSelectChange(val){
                        if(this.pieType === 1){
                            this.provinceSub()
                        } else if(this.pieType === 2){
                            this.citySub()                            
                        }
                    },
                    showpeopleline() {
                        let self = this
                        if (self.valuetime.length < 1) {
                            return
                        } else {
                            let option = {
                                method: 'post',
                                url: 'fs/task/getTrail',
                                data: {
                                    "mac": self.peopleDetail.mac,
                                    "imsi": self.peopleDetail.imsi,
                                    "imei": self.peopleDetail.imei,
                                    "star": self.valuetime[0],
                                    "end": self.valuetime[1]
                                }
                                //                            data: {"mac":"mac123", "imsi":"imsi456", "imei":"imei789", "star":"2018-03-01 11:04:28", "end":"2018-03-01 11:04:28"}
                            }

                            self.$HttpUtil(option, res => {
                                if (res.code === 0) {
                                    if (res.data.length >= 1) {
                                        let timeArr = res.data
                                        timeArr.sort(function(a,b){  
                                                return new Date(a.time).getTime() - new Date(b.time).getTime();  
                                        })
                                        self.peopleRoutes = timeArr
                                    } else {
                                        self.$NotifyUtil({
                                            title: '失败',
                                            message: '未找到人员轨迹',
                                            type: 'error',
                                            duration: 3000
                                        })
                                    }
                                } else {
                                    self.$NotifyUtil({
                                        title: '失败',
                                        message: res.msg,
                                        type: 'error'
                                    })
                                }
                            })
                        }
                    },
                    showfirstpoint() {
                        let self = this
                        let option = {
                            method: 'post',
                            url: 'fs/task/getRecentTrail',
                            data: {
                                "mac": self.peopleDetail.mac,
                                "imsi": self.peopleDetail.imsi,
                                "imei": self.peopleDetail.imei
                            }
                        }
                        self.$HttpUtil(option, res => {
                            if (res.code === 0) {
                                console.log(res.code)
                                if (res.data.length >= 1) {
                                    self.mapoption.peopoleendpoint = res.data[0]
                                } else {
                                    self.$NotifyUtil({
                                        title: '失败',
                                        message: '没有找到最后帝天',
                                        type: 'error',
                                        duration: 3000
                                    })
                                }
                            } else {
                                self.$NotifyUtil({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'error'
                                })
                            }
                        })

                    },
                    isShowEnd() {
                        if (!this.endFlag) {
                            this.showendpoint()
                            this.endFlag = !this.endFlag
                        } else {
                            this.$refs.mymap.removeEnd()
                            this.endFlag = !this.endFlag
                        }
                    },
                    showendpoint() {
                        let self = this
                        self.peopoleEndPoint = {
                            lng: self.peopleDetail.x,
                            lat: self.peopleDetail.y,
                            lasttime: self.peopleDetail.lasttime,
                            devicecode: self.peopleDetail.devicecode
                        }
                    },
                    handleCurrentChange(page) {
                        this.current = page
                        this.getTableData()
                    },
                    getDetail(row) {
                        let self = this
                        self.valuetime = []
                        self.infoLoading = true
                        let option = {}
                        if (row.imei) {
                            option = {
                                method: 'post',
                                url: 'collect/getPersonInfo',
                                data: {
                                    "imei": row.imei
                                }
                            }
                        } else if(row.imsi){
                            option = {
                                method: 'post',
                                url: 'collect/getPersonInfo',
                                data: {
                                    "imsi": row.imsi
                                }
                            }
                        }

                        self.$HttpUtil(option, res => {
                            if (res.code === 0) {
                                self.peopleDetail = res.data[0] ? res.data[0] : {}
                                self.peopleDetail.imei = row.imei ? row.imei : ''
                                self.peopleDetail.mac = row.mac ? row.mac : ''
                                self.peopleDetail.imsi = row.imsi ? row.imsi : ''
                            } else {
                                self.$NotifyUtil({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'error'
                                })
                            }
                            self.infoLoading = false                            
                        })
                    },
                    initPie: function (data) {
                        let self = this
                        myChart2 = echarts.init(document.getElementById('pieChart'));
                        myChart2.clear()
                        option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            series: [{
                                name: '重点外来人口占比',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: data,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        };
                        myChart2.setOption(option);
                        myChart2.off('click');
                        myChart2.on('click', function (params) {
                            if (params.componentType === 'series') {
                                self.tableCode = params.data.code
                                self.getTableData()
                            }
                        });
                    },
                    handleCheckChange: function (check, data) {
                        this.selectCity = data.checkedNodes
                    },
                    getTableData() {
                        let self = this
                        self.loading = true
                        this.peopleDetail = {}                        
                        self.tableData= []
                        let options = {
                            method: 'POST',
                            url: 'collect/getEpotenalByAttribution',
                            data: {
                                type: self.pieType,
                                timeType: self.value,
                                code: self.tableCode,
                                page: self.current,
                                size: self.pagesize
                            }
                        }
                        self.$HttpUtil(
                            options,
                            res => {
                                if (res.code === 0) {
                                    self.tableData = res.data.data
                                    self.totalPage = res.data.totalpage
                                    self.loading = false
                                } else {
                                    self.$NotifyUtil({
                                        type: 'error',
                                        message: res.msg
                                    })
                                    self.loading = false                                    
                                }
                            },
                            err => {
                                console.log(JSON.stringify(err))
                                self.loading = false                                
                            }
                        )
                    },
                    provinceSub() {
                        let self = this
                        let provinceList = []
                        self.showRight = true
                        self.tableData = []
                        self.selectCity.forEach(element => {
                            if (element.children) {
                                provinceList.push(element.value)
                            }
                        });
                        let options = {
                            method: 'POST',
                            url: 'collect/personRatio',
                            data: {
                                type: self.value,
                                province: 1,
                                provinceList: provinceList
                            }
                        }
                        self.$HttpUtil(
                            options,
                            res => {
                                if (res.code === 0) {
                                    let pieData = res.data.map(val => {
                                        return {
                                            value: val.person_num,
                                            name: val.province,
                                            code: val.province_code
                                        }
                                    })
                                    self.initPie(pieData)
                                    self.pieType = 1
                                } else {
                                    self.$NotifyUtil({
                                        type: 'error',
                                        message: res.msg
                                    })
                                }
                            },
                            err => {
                                console.log(JSON.stringify(err))
                            }
                        )
                    },
                    citySub() {
                        let self = this
                        let cityList = []
                        self.tableData = []
                        self.showRight = true                        
                        this.selectCity.forEach(element => {
                            if (!element.children) {
                                cityList.push(element.value)
                            }
                        });
                        let options = {
                            method: 'POST',
                            url: 'collect/personRatio',
                            data: {
                                type: self.value,
                                province: 2,
                                provinceList: cityList
                            }
                        }
                        self.$HttpUtil(
                            options,
                            res => {
                                if (res.code === 0) {
                                    let pieData = res.data.map(val => {
                                        return {
                                            value: val.person_num,
                                            name: val.city,
                                            code: val.city_code
                                        }
                                    })
                                    self.initPie(pieData)
                                    self.pieType = 2
                                } else {
                                    self.$NotifyUtil({
                                        type: 'error',
                                        message: res.msg
                                    })
                                }
                            },
                            err => {
                                console.log(JSON.stringify(err))
                            }
                        )
                    },
                    test() {
                        console.log(this.areaPoint)
                    },
                    routerGo(item){
                        window.location.href = item.path
                    },
                    goBack() {
                        window.location.href = 'bigHome2.html'
                    },
                    isShowEle() {
                        if (!this.electricityFlag) {
                            this.showElectricity()
                            this.electricityFlag = !this.electricityFlag
                        } else {
                            this.$refs.mymap.clearElectricity()
                            this.electricityFlag = !this.electricityFlag
                        }
                    },
                    showElectricity() {
                        let self = this
                        let options = {
                            method: 'GET',
                            url: 'collect/findWifi',
                            data: {
                                type: '2'
                            }
                        }
                        self.$HttpUtil(
                            options,
                            res => {
                                if (res.code === 0) {
                                    self.electricityPoints = res.data.map(val => {
                                        return {
                                            lng: val.lng,
                                            lat: val.lat,
                                            id: val.device_code,
                                            address: val.address,
                                            factoryName: val.factory_name,
                                            source: val.source
                                        }
                                    })
                                    console.log(res.data.data)
                                } else {
                                    self.$NotifyUtil({
                                        type: 'error',
                                        message: res.msg
                                    })
                                }
                            },
                            err => {
                                console.log(JSON.stringify(err))
                            }
                        )
                    },
                    isShowProbe() {
                        if (!this.probeFlag) {
                            this.showProbe()
                            this.probeFlag = !this.probeFlag
                        } else {
                            this.$refs.mymap.clearProbe()
                            this.probeFlag = !this.probeFlag
                        }
                    },
                    showProbe() {
                        let self = this
                        let options = {
                            method: 'GET',
                            url: 'collect/findWifi',
                            data: {
                                type: '1'
                            }
                        }
                        self.$HttpUtil(
                            options,
                            res => {
                                console.log(res)
                                if (res.code === 0) {
                                    self.probePoints = res.data.map(val => {
                                        return {
                                            lng: val.lng,
                                            lat: val.lat,
                                            id: val.device_code,
                                            address: val.address,
                                            factoryName: val.factory_name,
                                            source: val.source
                                        }
                                    })
                                } else {
                                    self.$NotifyUtil({
                                        type: 'error',
                                        message: res.msg
                                    })
                                }
                            },
                            err => {
                                console.log(JSON.stringify(err))
                            }
                        )
                    }
                },
                filters: {
                    phoneComplet(val){
                        if(!val) return '无数据'
                        let str = ''
                        let i = 0
                        while(i < 11 - val.length){ str += 'X';i++;}
                        return val + str
                    },
                    // addressFilter(val){
                    //     console.log(val)
                    //     if(!val) return '未查询到归属地'
                    // }
                },
                watch: {
                    value(newval,oldval){
                        if(this.pieType === 1){
                            this.provinceSub()
                        } else if(this.pieType === 2){
                            this.citySub()                    
                        }
                    }
                }
            })
        })
    </script>
</body>

</html>